import React from 'react'
import { 
    GoodsListWrapper,
    GoodsListItem

} from './style'
import { Image } from 'antd-mobile'

export default function GoodsList(props) {
    const {activityKey,goodsData}=props
    // console.log(goodsData);
    const renderGoodsItem=()=>{
        return goodsData.map(({id,tag,title,coupon,refprice,subprice,price})=>(
                    
            tag===activityKey && <GoodsListItem key={id}>
                <div className="goods-img">
                    {/* <a href=""><img src="https://img10.360buyimg.com/n7/jfs/t1/200663/19/21581/70427/625e847fE885fe4e1/cfa20bdc05e3def7.jpg" alt="" /></a>
                     */}
                    <a href=""><Image 
                                src='https://img10.360buyimg.com/n7/jfs/t1/200663/19/21581/70427/625e847fE885fe4e1/cfa20bdc05e3def7.jpg'
                                lazy
                                fit='cover'
                                // fallback
                                />
                    </a>
                </div>
                <div className="goods-title">
                    <a href=""><span>{title}</span></a>
                </div>
                <div className="goods-coupon">
                    {coupon && <div>
                        <li>券</li>
                        <li>{coupon}</li>
                    </div>}
                    <div>
                        <li>正快省新</li> 
                    </div>

                </div>
                {refprice && <div className="goods-refprice">
                    <span>参考价￥{refprice}</span>
                </div>}
                {subprice&& <div className="goods-subprice">
                    <ul>
                        <li><span>补贴价</span></li>
                        <li><span>￥</span><span>{subprice}</span></li>
                    </ul>
                    <ul>
                        <li><span>已补</span></li>
                        <li><span>￥</span><span>{refprice - subprice}</span></li>
                    </ul>
                </div>}
                {!subprice &&<div className="goods-price"><span>￥</span><span>{price}</span></div>}
        </GoodsListItem>
        ))
    }
    return (
        <GoodsListWrapper>
            {renderGoodsItem()}
        </GoodsListWrapper>
    )
}
